import { toast } from "sonner";
import { Button } from "@/ui/button";
import { Card, CardContent, CardFooter } from "@/ui/card";
import { Switch } from "@/ui/switch";

/**
 * 消息通知设置标签页 - 如闻鸡起舞，及时获取重要消息
 * 鸿雁传书，千里之外皆可得知，通知设置助您掌握动态
 */
export default function NotificationsTab() {
	// 处理保存操作 - 如落叶归根，设置永久生效
	const handleClick = () => {
		toast.success("更新成功！");
	};
	return (
		<Card>
			<CardContent className="grid grid-cols-1 gap-4 lg:grid-cols-2">
				<div className="flex-1">
					<h4>活动通知</h4>
					<p className="text-text-secondary">春风化雨润无声，活动消息及时知，设置通知助您掌握重要动态</p>
				</div>
				<div className="flex-2">
					<div className="flex w-full flex-col gap-4 rounded-lg px-6 py-8 bg-bg-neutral">
						<div className="flex w-full justify-between">
							<div>有人回复我的表单时发送邮件通知</div>
							<Switch defaultChecked />
						</div>
						<div className="flex w-full justify-between">
							<div>有人评论我的文章时发送邮件通知</div>
							<Switch />
						</div>
						<div className="flex w-full justify-between">
							<div>有人关注我时发送邮件通知</div>
							<Switch defaultChecked />
						</div>
					</div>
				</div>

				<div className="flex-1">
					<h4>应用通知</h4>
					<p className="text-text-secondary">山高水长路遥远，应用消息传千里，及时通知助您不错过精彩内容</p>
				</div>
				<div className="flex-2">
					<div className="flex w-full flex-col gap-4 rounded-lg px-6 py-8 bg-bg-neutral">
						<div className="flex w-full justify-between">
							<div>新闻和公告</div>
							<Switch />
						</div>
						<div className="flex w-full justify-between">
							<div>每周产品更新</div>
							<Switch defaultChecked />
						</div>
						<div className="flex w-full justify-between">
							<div>每周博客摘要</div>
							<Switch />
						</div>
					</div>
				</div>
			</CardContent>
			<CardFooter className="flex w-full justify-end">
				<Button onClick={handleClick}>保存更改</Button>
			</CardFooter>
		</Card>
	);
}
